<template>
  <div>
    <!-- 导航搜索 -->
    <div class="search">
      <div class="left">
        <van-icon name="arrow-left" @click="$router.push('/home')" />
      </div>
      <!-- 搜索导航 -->
      <form action="/">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          @search="onSearch"
          class="searchInput"
        >
          <template #left>
            <div class="city" @click="cityFn">
              <span>{{ cityName || 北京 }}</span>
              <span
                ><van-icon
                  name="play"
                  size="1.1em"
                  color="#7f7f80"
                  style="transform: rotate(90deg)"
              /></span>
            </div>
          </template>
        </van-search>
      </form>
      <!-- 地图icon -->
      <div class="icon"><van-icon name="location-o" /></div>
    </div>
    <!-- 选择区域 -->

    <van-dropdown-menu active-color="#59b67e">
      <van-dropdown-item title="区域" ref="item" >
        <van-cell center>

            <van-picker
              show-toolbar
              :columns="columns"
              toolbar-position="bottom"
              @change="onChange"
              @confirm="onConfirm"
              @cancel="onCancel"
            />

        </van-cell>
      </van-dropdown-item>
      <van-dropdown-item title="方式" ref="type">
        <van-cell center>
          <template #title>
            <van-picker
              toolbar-position="bottom"
              show-toolbar
              :columns="typeList"
              @confirm="onConfirm"
              @cancel="onCancel"
              @change="onTypeChange"
            />
          </template>
        </van-cell>
      </van-dropdown-item>
      <van-dropdown-item title="租金" ref="Price">
        <van-cell center>
          <template #title>
            <van-picker
              toolbar-position="bottom"
              show-toolbar
              :columns="pirceList"
              @confirm="onConfirm"
              @cancel="onCancel"
              @change="onPriceChange"
            />
          </template>
        </van-cell>
      </van-dropdown-item>
      <van-dropdown-item title="筛选" @open="openFn" > </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 渲染页面 -->
    <div>
      <MyCell v-for="item in list" :key="item.id" :item="item"></MyCell>
    </div>
    <!-- 弹出层 -->
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '270px' }"
      close-icon-position="bottom"
    >
      <div style="padding: 0 0 0 15px">
        <!-- 户型选项 -->
        <div class="hx">
          <p>户型</p>
          <div class="btnProps">
            <span class="homeProps">一室</span>
            <span class="homeProps propsleft">二室</span>
            <span class="homeProps">三室</span>
            <span class="homeProps propsleft">四室</span>
            <span class="homeProps">四室</span>
          </div>
        </div>
        <!-- 朝向 -->
        <div class="hx">
          <p>朝向</p>
          <div class="btnProps cxBtn">
            <span class="homeProps">东</span>
            <span class="homeProps propsleft">西</span>
            <span class="homeProps">南</span>
            <span class="homeProps propsleft">北</span>
            <span class="homeProps">东南</span>
            <span class="homeProps propsleft">东北</span>
            <span class="homeProps">西南</span>
            <span class="homeProps propsleft">西北</span>
          </div>
        </div>
        <!-- 楼层 -->
        <div class="lc">
          <p>楼层</p>
          <div class="btnProps lcBtn">
            <span class="homeProps">高楼曾</span>
            <span class="homeProps propsleft">中楼层</span>
            <span class="homeProps">低楼层</span>
          </div>
        </div>
        <!-- 房屋亮点 -->
        <div class="lc">
          <p>房屋亮点</p>
          <div class="btnProps ldBtn">
            <span class="homeProps">集中供暖</span>
            <span class="homeProps propsleft">双卫生间</span>
            <span class="homeProps">近地铁</span>
            <span class="homeProps propsleft">随时看房</span>
            <span class="homeProps">精装</span>
            <span class="homeProps propsleft">公寓</span>
            <span class="homeProps">独立卫生间</span>
            <span class="homeProps propsleft">押一付一</span>
            <span class="homeProps">独立阳台</span>
            <span class="homeProps propsleft">月租</span>
            <span class="homeProps">限女生</span>
            <span class="homeProps propsleft">限男生</span>
            <span class="homeProps">近地铁</span>
            <span class="homeProps propsleft">新上</span>
          </div>
        </div>
      </div>
      <!-- 点击按钮 -->
      <div class="submitBtn">
        <van-button type="default" class="qcBtn">清除</van-button>
        <van-button type="primary" class="subBtn">确认</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getHouse } from '@/utils/stroage'
import { searchHouse, cityTwo, tabSearchCityList } from '@/api/area'
import MyCell from '@/components/MyCell'

export default {
  async created () {
    const p1 = this.$toast.loading({
      message: '加载中...',
      duration: 0,
      forbidClick: true
    })
    const BJobj = {
      label: '北京',
      value: 'AREA|88cff55c-aaa4-e2e0',
      pinyin: 'beijing',
      short: 'bj'
    }
    const CityObj = JSON.parse(getHouse())

    // 判断本地有无数据
    if (!CityObj) {
      // 本地无数据给默认数据
      this.cityName = BJobj.label
      const res = await searchHouse(BJobj.value)
      // console.log(res)
      this.list = res.data.body.list
    } else {
      // 本地有数据渲染数据
      this.cityName = JSON.parse(getHouse()).label
      const res = await searchHouse(JSON.parse(getHouse()).value)
      // console.log(res)
      this.list = res.data.body.list
    }

    // 获取二级城市
    const citylist = CityObj
      ? await cityTwo(JSON.parse(getHouse()).value)
      : await cityTwo(BJobj.value)
    this.filterList = citylist
    // 二级城市列表
    for (let i = 0; i < citylist.data.body.length; i++) {
      this.cityList.push({ text: citylist.data.body[i].label })
    }
    // 获取的二级列表存储本地
    this.columns[0].children = this.cityList
    // 三级
    // AREA|b4e8be1a-2de2-e039
    // const three = await cityTwo('AREA|0e3a4ab4-fbc1-26d1')
    // console.log(three)
    // 判断加载
    if (this.list) {
      p1.clear()
    }
  },
  data () {
    return {
      isshow: true,
      list: [],
      show: false,
      value: '',
      cityName: '北京',
      cityList: [],
      // 合租状态
      typeList: ['不限', '整租', '合租'],
      typeValue: '',
      // 价格
      pirceList: [
        '不限',
        '1000及以下',
        '1000-2000',
        '2000-3000',
        '3000-4000',
        '4000-5000',
        '5000-7000',
        '7000以上'
      ],
      filterList: [],
      ThreeCityList: [],
      pirceValue: '',
      columns: [
        {
          text: '区域',
          children: [
            {
              text: '',
              children: []
            }
          ]
        }
      ],
      axiosList:
        {
          cityId: null,
          stat: null,
          end: null,
          area: null,
          rentType: null,
          price: null,
          more: null
        }

    }
  },
  methods: {
    onSearch () {},
    cityFn () {
      this.$router.push('/city')
    },
    // 合租状态
    async onConfirm (value, index) {
      this.$refs.item.toggle(false)
      this.$refs.type.toggle(false)
      this.$refs.Price.toggle(false)
      const res = await tabSearchCityList(this.axiosList)
      // console.log(res)
      this.list = res.data.body.list
    },
    async onChange (picker, value, index) {
      this.$refs.item.toggle()
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
      console.log(value[1])
      // console.log(this.filterList.data.body)
      if (value[1] !== '不限') {
        const arr = this.filterList.data.body.filter(
          (item) => item.label === value[1]
        )
        // 获取二级城市的id
        this.axiosList.cityId = arr[0].value
        const three = await cityTwo(arr[0].value)
        // 利用二级城市id 获取三级城市
        console.log(three.data.body)
        const arr2 = []
        for (let i = 0; i < three.data.body.length; i++) {
          arr2.push({
            text: three.data.body[i].label,
            value: three.data.body[i].value
          })
        }
      }
    },
    onCancel () {
      this.$refs.item.toggle(false)
      this.$refs.type.toggle(false)
      this.$refs.Price.toggle(false)
    },
    // 切换价格 编辑请求数据
    onPriceChange (picker, value, index) {
      // 处理请求数据
      if (value === '1000及以下') {
        this.axiosList.price = 'PRICE | 1000'
      } else if (value === '1000-2000') {
        this.axiosList.price = 'PRICE | 2000'
      } else if (value === '2000-3000') {
        this.axiosList.price = 'PRICE | 3000'
      } else if (value === '3000-4000') {
        this.axiosList.price = 'PRICE | 4000'
      } else if (value === '4000-5000') {
        this.axiosList.price = 'PRICE | 5000'
      } else if (value === '5000-7000') {
        this.axiosList.price = 'PRICE | 7000'
      } else if (value === '7000以上') {
        this.axiosList.price = 'PRICE | 10001'
      } else {
        this.axiosList.price = null
      }
    },
    openFn () {
      this.show = true
    },
    // 整租/合租
    onTypeChange (index) {
      // // console.log(picker, values)
      // console.log(values, index)
      if (index === 0) {
        console.log('1 - 20')
        this.axiosList.stat = 1
        this.axiosList.end = 20
        this.axiosList.rentType = null
      } else if (index === 1) {
        // console.log('true')
        this.axiosList.stat = 1
        this.axiosList.end = 20
        this.axiosList.rentType = true
      } else {
        this.axiosList.stat = 1
        this.axiosList.end = 20
        this.axiosList.rentType = false
      }
    }
  },

  components: { MyCell }
}
</script>

<style lang="less" scoped>
.search {
  height: 50px;
  background-color: #58b67f;
  // padding-left: 12px;
  display: flex;
  align-items: center;

  /deep/.left {
    text-align: center;
    margin-right: 12px;
    margin-left: 10px;
    width: 25px;
    // padding: 0 10px;
    .van-icon {
      position: relative;
      display: inline-block;
      // font: normal normal normal 14px/1 'vant-icon';
      /* font-size: inherit; */
      text-rendering: auto;
      // -webkit-font-smoothing: antialiased;
      /* width: 25px; */
      font-size: 16px;
      color: #fff;
    }
  }

  /deep/.icon .van-icon {
    padding: 0 10px;
    position: relative;
    display: inline-block;
    font: normal normal normal 14px/1 "vant-icon";
    /* font-size: inherit; */
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    /* width: 25px; */
    width: 25px;
    font-size: 25px;
    color: #fff;
    // line-height: 25px;
    padding-top: 3px;
  }
}
.shu {
  display: inline-block;
  margin-left: -10px;
  height: 40px !important;
  color: #a1a3a5;
  margin-right: 10px;
}
/deep/.searchInput {
  flex: 1;
  background-color: #fff !important;
  height: 34px !important;
  width: 278px;
  // background-color: #fff;
  padding: 0 !important;
  line-height: 34px;
}
.city {
  width: 60px;
  text-align: center;
  height: 34px;
  line-height: 34px;
  font-size: 14px;
  background-color: #f7f8fa;
  color: #333;

  span {
    padding-left: 3px;
  }
}
/deep/ .van-cell {
  flex: 1;
  // padding: 5px 8px 5px 0;
  background-color: #f7f8fa;
}
// 选择器样式
/deep/.van-picker__cancel {
  color: #58b67f;
  width: 125px;
  border: 1px solid #e9e9e9;
  font-size: 18px;
}
/deep/.van-picker__confirm {
  color: #fff;
  width: 250px;
  background-color: #58b67f;
  font-size: 18px;
}
[data-v-b3f17e3e] .van-cell {
  background-color: #f7f8fa;
  padding: 0;
}
/deep/.van-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}
.btnProps {
  width: 205px;
  height: 156px;
  // background-color: aqua;
  margin-left: 55px;
  padding-right: 50px;
  box-sizing: border-box;
  border-bottom: 1px solid #dddddd;

  .homeProps {
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 15px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    // background-color: yellowgreen;
    font-size: 12px;
    color: #888;
  }
  .propsleft {
    margin-left: 15px;
  }
}
.hx {
  padding-right: 80px;
}
/deep/.van-field__control {
  background-color: #fff;
}
/deepp/.city[data-v-b3f17e3e] {
  background-color: #fff;
}
.cxBtn {
  height: 200px;
  padding: 0 15px;
}
.lcBtn {
  height: 109px;
  padding: 0 15px;
}
.ldBtn {
  height: 343px;
  border-bottom: 1px solid #fff;
  padding: 0 15px;
}
.submitBtn {
  width: 100%;
  padding: 0;
  // background-color: #58b67f;
  .subBtn {
    width: 172px;
  }
  .qcBtn {
    width: 98px;
  }
}
</style>
